<template>
    <div class="NavBar">
      <div class="container warp">
        <img src="@/assets/logo.png" alt="" @click="goHome">
        <ul class="nav_ul">
          <li :class="$route.path=='/home'?'active':''" @click="$router.push('/')">首页</li>
          <li :class="$route.path=='/lots'?'active':''" @click="$router.push('/lots')">标的</li>
          <li :class="$route.path=='/auction'?'active':''" @click="$router.push('/auction')">拍卖会</li>
          <li :class="$route.path=='/quotation'?'active':''" @click="$router.push('/quotation')">重废行情</li>
          <li :class="$route.path=='/wasteShopping'?'active':''" @click="$router.push('/wasteShopping')">循环物资</li>
          <li :class="$route.path=='/caseLibrary'?'active':''" @click="$router.push('/caseLibrary')">案例</li>
          <!-- <li :class="$route.path=='/firmIn'?'active':''" @click="$router.push('/firmIn')">企业入驻</li> -->
          <li :class="$route.path=='/wasteResource'?'active':''" @click="$router.push('/wasteResource')">中铁闲废资源</li>
          <li :class="$route.path=='/actionDjjx'?'active':''" @click="$router.push('/actionDjjx')">大家机械</li>
          <!-- <li :class="$route.path=='/business'?'active':''" @click="$router.push('/business')">行业资讯</li> -->
        </ul>
        <div class="search">
          <el-input v-model="keyWord" @keyup.enter.native="keywordSearch" placeholder="请输入标的关键字" />
          <el-button @click.native.prevent="keywordSearch">搜索</el-button>
        </div>
      </div>
    </div>
</template>
<script>
 export default {
  inject: ['reload'],
    data() {
      return {
        keyWord:''
      };
    },
    methods: {
      keywordSearch(){
        if(this.$route.path=='/lots'){
          if(this.keyWord){
            this.$router.push({
                query:{keyWord:this.keyWord}
            });
          }else{
            this.$router.push({
                query:{}
            });
          }
            this.reload()// 需要刷新页面
        }else{
          if(this.keyWord){
            this.$router.push({path:'/lots',query: {keyWord:this.keyWord}});
          }else{
            this.$router.push({path:'/lots'});
          }
        }
        
        
      },
      goHome(){
        this.$router.push({path:'/home'});
      }
    }
  }
</script>


<style scoped lang="less">
@import '@/styles/index.less';
.NavBar{
  border-bottom: 1px solid #f6f6f6;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  .container{
    height: 100px;
    line-height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 160px;
      // height: 70px;
    }
    .nav_ul{
      display: flex;
      align-items: center;
      li{
        padding:0px 10px;
        margin: 0 4px;
        font-size: 18px;
        font-weight: 600;
        color: #242d3d;
        &.active{
          color: @base-color;
          border-bottom: 4px solid @base-color;
        }
      }
      li:hover{
        color: @base-color;
        border-bottom: 4px solid @base-color;
      }
    }
    .search{
      display: flex;
      align-items: center;
      .el-input{
        width: 240px;
        padding: 0;
        margin: 0;
        /deep/.el-input__inner{
          width: 240px;
          height: 30px;
          border: 2px solid @base-color;
          text-indent: 10px;
          padding: 0 2px;
          border-radius: 6px 0 0 6px;
        }
      }
      .el-button{
        width: 70px;
        height: 30px;
        line-height: 30px;
        background: @base-color;
        color: #fff;
        padding: 0;
        border: 1px solid @base-color;
        border-radius:0px 6px 6px 0px;
      }
      // input{
      //   width: 240px;
      //   height: 30px;
      //   border: 2px solid @base-color;
      //   border-radius: 6px 8px 8px 6px;
      //   text-indent: 10px;
      //   margin-right: -6px;
      // }
      // span{
      //   display: inline-block;
      //   width:70px;
      //   height: 34px;
      //   line-height: 32px;
      //   background: @base-color;
      //   color: #fff;
      //   border-radius:0px 6px 6px 0px;
      //   padding-right: 2px;
      //   text-align: center;
      //   cursor: pointer;
      //   font-size: 14px;
      //   outline: 0;
      // }
    }

  }
  
}
  

</style>